import React from "react";
import "../css/Header.css";
import {
    Link,
    HashRouter,
    Switch,
    Route
} from "react-router-dom";
import GongSi from "../navigationBar/gongsi"
import FaZhan from "../navigationBar/fazhan"
import GuanLi from "../navigationBar/guanli"
import JiaRu from "../navigationBar/jiaru"
import LianXi from "../navigationBar/lianxi"
import XiaoMi from "../navigationBar/xiaomi"
import XinWen from "../navigationBar/xinwen"

class Header extends React.Component{
    constructor(props){
        super(props)
    };

    render(){
        return(
            <div className="header_container">
                <div className="header_wrapper">
                    <img src="logo.png"/>
                    <div className="login_btn"
                    onClick={()=>{
                        this.props.history.push("/login")
                    }}></div>
                    <div className="resign_btn"
                    onClick={()=>{
                        this.props.history.push("/resign")
                    }}></div>
                </div>
                {/* tab切换 */}
                <div className="tab_wrapper">
                    <HashRouter>
                            <div className="tab_bar">
                                <div className="tab_item"><Link style={{ textDecoration:'none'}} to="/guanli">管理团队</Link></div>
                                <div className="tab_item"><Link style={{ textDecoration:'none'}} to="/xiaomi">小米文化</Link></div>
                                <div className="tab_item"><Link style={{ textDecoration:'none'}} to="/fazhan">发展经历</Link></div>
                                <div className="tab_item"><Link style={{ textDecoration:'none'}} to="/xinwen">小米新闻</Link></div>
                                <div className="tab_item"><Link style={{ textDecoration:'none'}} to="/jiaru">加入小米</Link></div>
                                <div className="tab_item"><Link style={{ textDecoration:'none'}} to="/">公司简介</Link></div>
                                <div className="tab_item"><Link style={{ textDecoration:'none'}} to="/">投资关系</Link></div>
                                <div className="tab_item"><Link style={{ textDecoration:'none'}} to="/lianxi">联系我们</Link></div>
                            </div>
                        <Switch>
                            <Route path="/fazhan" component={FaZhan}></Route>
                            <Route path="/guanli" component={GuanLi}></Route>
                            <Route path="/jiaru" component={JiaRu}></Route>
                            <Route path="/lianxi" component={LianXi}></Route>
                            <Route path="/xiaomi" component={XiaoMi}></Route>
                            <Route path="/xinwen" component={XinWen}></Route>
                            <Route path="/" component={GongSi}></Route>
                        </Switch>
                    </HashRouter>
                </div>
            </div>
        )
    }
}

export default Header;